<template>
  <div id="app">
    <!--  导航栏  -->
    <div class="navbar">
      <div class="containner flex item-center justify-between">
        <div class="navbar-left flex item-center text-sm">
          <router-link class="router-link brand red" to="/">学掌门商城</router-link>
        </div>
        <div class="navbar-right flex item-center justify-end">
          <router-link class="router-link text-sm gray hover-red" to="/login">
            你好, {{customer.login_customer == null? '请登录': customer.login_customer.user_name}}
          </router-link>
          <div class="navbar-seperate"></div>
          <router-link class="router-link text-sm red" to="/regist">免费注册</router-link>
          <div class="navbar-seperate"></div>
          <router-link class="router-link text-sm gray hover-red" to="/customer/orderlist">我的订单
          </router-link>
          <div class="navbar-seperate"></div>
          <a class="router-link text-sm gray hover-red" to="/customer/vip">我的会员</a>
          <div class="navbar-seperate"></div>
          <router-link class="router-link text-sm gray hover-red" to="/customer/address">收货信息
          </router-link>
          <div class="navbar-seperate"></div>
          <a class="router-link text-sm gray hover-red" to="/website/service">客户服务</a>
          <div class="navbar-seperate"></div>
          <a class="router-link text-sm gray hover-red" to="/website/nav">网站导航</a>
          <div class="navbar-seperate"></div>
          <a class="router-link text-sm gray hover-red" to="/website/mobile">手机学掌门</a>
        </div>
      </div>
    </div>
    <!--  /导航栏  -->
    <!--  搜索栏  -->
    <div class="search-bar containner flex justify-between item-center mt-20">
      <img :src="require('./assets/logo.png')" width="140px" />
      <div class="search-bar-center">
        <div class="flex item-center justify-center">
          <div class="flex item-center">
            <input type="text" class="search-bar-input" placeholder="商品名称……" />
            <button class="search-bar-btn hand">搜索</button>
          </div>
          <button class="search-bar-cart hand ml-20" @click="my_cart">我的购物车</button>
        </div>
        <div class="search-bar-keywords flex justify-around item-center mt-10">
          <div class="hand hover-red red text-sm">春日环游记</div>
          <div class="hand hover-red gray text-sm">iphone 12</div>
          <div class="hand hover-red gray text-sm">小米</div>
          <div class="hand hover-red gray text-sm">榴莲尝鲜</div>
          <div class="hand hover-red gray text-sm">生鲜五折</div>
          <div class="hand hover-red gray text-sm">品质家电</div>
          <div class="hand hover-red gray text-sm">新品激光</div>
          <div class="hand hover-red gray text-sm">春茶</div>
          <div class="hand hover-red gray text-sm">正品农贸</div>
          <div class="hand hover-red gray text-sm">嗨9购了</div>
          <div class="hand hover-red gray text-sm">鱼人节好物</div>
        </div>
        <div class="flex justify-between item-center mt-20">
          <div class="hand hover-red red text-lg">秒杀</div>
          <div class="hand hover-red gray text-lg">优惠券</div>
          <div class="hand hover-red gray text-lg">学掌门会员</div>
          <div class="hand hover-red gray text-lg">品牌闪购</div>
          <div class="hand hover-red gray text-lg">拍卖</div>
          <div class="hand hover-red gray text-lg">家电数码</div>
          <div class="hand hover-red gray text-lg">超市日用</div>
          <div class="hand hover-red gray text-lg">蔬果生鲜</div>
          <div class="hand hover-red gray text-lg">国际好货</div>
          <div class="hand hover-red gray text-lg">潮流服饰</div>
        </div>
      </div>
      <div class="search-bar-right"></div>
    </div>
    <!--  /搜索栏  -->

    <!--  正文内容  -->
    <div class=" mt-10 py-10">
      <router-view></router-view>
    </div>
    <!--  /正文内容  -->

    <!--  页脚  -->
    <div class="footer">
      <div class="containner">
        <div class="flex justify-between">
          <div class="footer-left flex">
            <div class="footer-list">
              <div class="footer-list-title">学掌门商城</div>
              <div class="footer-list-text">中国买家用户使用得更多的商城平台</div>
              <div class="footer-list-text">学掌门平台打造的<span class="red">"网购神器"</span></div>
              <div class="footer-list-text"><span class="red">60,000</span> 多个专业领域</div>
              <div class="footer-list-text"><span class="red">600,000</span> 多个品牌</div>
              <div class="footer-list-text"><span class="red">760,000,000</span> 个商品</div>
              <div class="footer-list-text"><span class="red">38,000</span> 多个分类</div>
            </div>

            <div class="footer-list">
              <div class="footer-list-title">关于我们</div>
              <div class="footer-list-text">关于学掌门</div>
              <div class="footer-list-text">隐私政策</div>
              <div class="footer-list-text">商城平台服务协议</div>
              <div class="footer-list-text">网络信息侵权通知指引</div>
              <div class="footer-list-text">学掌门商城服务监督员</div>
              <div class="footer-list-text">网站地图</div>
              <div class="footer-list-text">联系我们</div>
            </div>

            <div class="footer-list">
              <div class="footer-list-title">Vip服务</div>
              <div class="footer-list-text">商品攻略 免费体验</div>
              <div class="footer-list-text">商品问答 评估指南</div>
              <div class="footer-list-text">专业咨询 海量宝贝</div>
              <div class="footer-list-text">偏好设置 随机抽奖</div>
              <div class="footer-list-text">自动评论 账单统计</div>
              <div class="footer-list-text">消费分析 APP下载</div>
              <div class="footer-list-text">特价秒杀 发现更多</div>
            </div>
          </div>

          <div class="footer-right flex">
            <div class="footer-list-right">
              <img :src="require('./assets/index_bottom_wechat.png')" />
              <div class="footer-list-title">学掌门APP</div>
              <div class="footer-list-title">扫描立即下载</div>
            </div>
            <div class="footer-list-right">
              <img :src="require('./assets/index_bottom_wechat.png')" />
              <div class="footer-list-title">学掌门商城</div>
              <div class="footer-list-title">订阅号</div>
            </div>
            <div class="footer-list-right">
              <img :src="require('./assets/index_bottom_wechat.png')" />
              <div class="footer-list-title">学掌门商城</div>
              <div class="footer-list-title">官方服务号</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  /页脚  -->

  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    computed: {
      ...mapState(['customer'])
    },
    methods: {
      my_cart() {
        this.$router.push({
          path: '/customer/cart'
        })
      }
    }
  }
</script>

<style>
  /*  页面整体样式  */
  body,
  div,
  img {
    margin: 0px;
    border: 0px;
    padding: 0px;
  }

  body {
    text-align: center;
  }

  .containner {
    width: 1200px;
    margin: 0 auto;
  }

  .flex {
    display: flex;
    flex-direction: row;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-around {
    justify-content: space-around;
  }

  .item-start {
    align-items: flex-start;
  }

  .item-end {
    align-items: flex-end;
  }

  .item-center {
    align-items: center;
  }

  .wrap {
    flex-wrap: wrap;
  }

  .hand {
    cursor: pointer;
  }

  .rounded {
    border-radius: 6px;
  }

  .box-shadow {
    box-shadow: 0px 0px 10px #ccc;
  }

  .text-xs {
    font-size: 10px;
  }

  .text-sm {
    font-size: 12px;
  }

  .text-md {
    font-size: 14px;
  }

  .text-lg {
    font-size: 16px;
  }

  .text-xl {
    font-size: 18px;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .bold {
    font-weight: 600;
  }

  .weight {
    font-weight: 900;
  }

  .router-link {
    text-decoration: none;
  }

  .mt-40 {
    margin-top: 40px;
  }

  .mt-30 {
    margin-top: 30px;
  }

  .mt-20 {
    margin-top: 20px;
  }

  .mt-10 {
    margin-top: 10px;
  }

  .mt-5 {
    margin-top: 5;
  }

  .ml-20 {
    margin-left: 20px;
  }

  .ml-10 {
    margin-left: 10px;
  }

  .ml-5 {
    margin-left: 5px;
  }

  .mx-5 {
    margin-left: 5px;
    margin-right: 5px;
  }

  .mx-10 {
    margin-left: 10px;
    margin-right: 10px;
  }

  .mx-20 {
    margin-left: 20px;
    margin-right: 20px;
  }

  .my-5 {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .my-10 {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .my-20 {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .px-5 {
    padding-left: 5px;
    padding-right: 5px;
  }

  .px-10 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .px-20 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pl-5 {
    padding-left: 5px;
  }

  .pl-10 {
    padding-left: 10px;
  }

  .pl-20 {
    padding-left: 20px;
  }

  .pr-5 {
    padding-right: 5px;
  }

  .pr-10 {
    padding-right: 10px;
  }

  .pr-20 {
    padding-right: 20px;
  }

  .py-5 {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .red {
    color: #e1251b;
  }

  .gray {
    color: #999;
  }

  .white {
    color: #fff;
  }

  .black {
    color: #000;
  }

  .bg-white {
    background-color: #fff;
  }

  .bg-red {
    background-color: #e1251b;
  }

  .bg-gray {
    background-color: #f4f4f4;
  }

  .dark {
    color: #666;
  }

  .hover-red:hover {
    color: #e1251b;
  }

  .hover-bg-gray:hover {
    background-color: #ddd;
  }


  /*  导航栏部分样式  */
  .navbar {
    background-color: #e3e4e5;
    padding: 4px 0px;
  }

  .brand {
    margin-left: 20px;
    font-size: 16px;
    font-weight: 600;
  }

  .navbar-seperate {
    width: 1px;
    background-color: #ccc;
    height: 10px;
    margin: 0px 10px;
  }

  /*  搜索栏部分样式  */
  .search-bar-right {
    width: 140px;
  }

  .search-bar-center {
    width: 780px;
  }

  .search-bar-input {
    padding: 8px 15px;
    border: 1px solid #e1251b;
    outline: none;
    border-radius: 6px 0px 0px 6px;
    width: 425px;
    color: #999;
  }

  .search-bar-btn {
    width: 58px;
    height: 33px;
    background-color: #e1251b;
    border-radius: 0px 6px 6px 0px;
    outline: none;
    border: 0px;
    color: #fff;
  }

  .search-bar-btn:hover {
    background-color: #ef452b;
  }

  .search-bar-cart {
    width: 128px;
    height: 31px;
    border-radius: 6px;
    outline: none;
    border: 1px solid #ddd;
    color: #ef452b;
    background-color: transparent;
  }

  .search-bar-cart:hover {
    border: 1px solid #e1251b;
    color: #ef452b
  }

  .search-bar-keywords {
    width: 640px;
  }

  /*  页脚部分样式  */
  .footer {
    margin-top: 20px;
    padding: 20px 0px;
    background-color: #3c3c3c;
    font-size: 12px;
    color: #c2c2c2;
    text-align: left;
  }

  .footer-list {
    margin-right: 40px;
  }

  .footer-list-title {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .footer-list-text {
    margin-bottom: 5px;
  }

  .footer-list-right {
    margin-left: 40px;
  }

  .footer-list-right .footer-list-title {
    text-align: center;
    margin-bottom: 0px;
  }
</style>
